<template>
  <button>
    <span>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill="none" d="M0 0h24v24H0z" />
        <path fill="currentColor" d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z" />
      </svg> 添加角色
    </span>
  </button>
</template>

<script>
export default {
  name: 'AddButton'
}
</script>

<style scoped lang="scss">
button {
  //scale: 0.8;
  border: 2px solid #24b4fb;
  background-color: #24b4fb;
  border-radius: 0.9em;
  padding: 0.2em 0.3em 0.2em 0.25em;
  transition: all ease-in-out 0.2s;
  font-size: 14px;
  cursor:pointer
}

button span {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: 600;
}

button:hover {
  background-color: #0071e2;
}
</style>
